<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅后即焚</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .upload-container {
            margin-top: 50px;
            text-align: center;
        }
        .preview-container img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
        }
        .message {
            color: green;
            font-weight: bold;
            margin-top: 10px;
        }
        /* 燃烧效果的 CSS */
        .burn {
            animation: burn 1s forwards;
        }

        @keyframes burn {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
                transform: scale(1.5);
            }
        }

        #imageContainer {
            position: relative;
        }

        #burnEffect {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 0, 0, 0.5);
            display: none;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="upload-container">
    <h1>阅后即焚</h1>
    <form action="/images/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" required>
        <button type="submit">Upload</button>
    </form>
    <p class="message"></p>
</div>

<div id="imageContainer" class="preview-container" style="display:none;">
    <h2>图片预览</h2>
    <img id="uploadedImage" alt="上传图片">
    <div id="burnEffect"></div>
</div>

<button id="burnButton" style="display:none;">阅后即焚</button>

<script>
    // 显示图片和“阅后即焚”按钮
    function showImagePreview(imageUrl) {
        const imgElement = document.getElementById("uploadedImage");
        imgElement.src = imageUrl;
        document.getElementById("imageContainer").style.display = "block";
        document.getElementById("burnButton").style.display = "inline-block";
    }

    // 点击阅后即焚按钮的事件
    document.getElementById("burnButton").onclick = function() {
        const burnEffect = document.getElementById("burnEffect");
        burnEffect.style.display = "block";  // 显示燃烧效果
        burnEffect.classList.add("burn");   // 添加燃烧动画效果

        // 延迟后删除图片
        setTimeout(function() {
            document.querySelector("img").style.display = "none";  // 隐藏图片
            burnEffect.style.display = "none";  // 隐藏燃烧效果
            alert("图片已阅后即焚，无法恢复。");
        }, 2000);  // 2秒后删除
    };

    // 假设你在上传图片时，返回一个图片 URL，可以通过以下方式显示预览
    // 假设这里有一个示例图片 URL
    const imageUrl = 'https://via.placeholder.com/300'; // 你可以替换成从服务器获取的图片 URL
    showImagePreview(imageUrl);
</script>
</body>
</html>
